<template>
	<view class="content">

		<view class="logo">
			<view class="s1">
				<image :src="vuex_theme.logo"></image>
				<text>{{ vuex_theme.name }}</text>
			</view>
		</view>
		<view class="login">
			<view class="title">欢迎登录{{ vuex_theme.name }}</view>
			<view class="c1">手机号</view>
			<view class="c2">
				<u--input v-model='row.mobile' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"
							:keepRunning='true'></u-code>
						<text class="tips" @tap="getCode">{{ tips }}</text>
					</template>
				</u--input>
			</view>
			<view class="c1">短信验证码</view>
			<view class="c3">
				<valid-code ref="code" :maxlength="4" :isPwd="false" @finish="setCode"></valid-code>
			</view>

			<view class="c4" v-show="c4_show">
				<view class="kkk">
					<image src="@/static/icon/xinxi.png"></image>
					<text>{{ description }}</text>
				</view>
			</view>

			<view class="c5">
				<view class="r1" style="font-size: 12px;">
					<u-checkbox-group v-model="checkbox" placement="column" @change="checkboxChange">
						<u-checkbox class="boxTxt" style="margin: 0;"
							:customStyle="{marginBottom: '16rpx',fontSize:'12px'}" label='勾选同意' labelSize='28rpx'
							labelColor='rgba(17, 2, 2, 1)' inactiveColor='rgba(10, 22, 41, 1)' name='1'>
						</u-checkbox>
					</u-checkbox-group>
					<text style="font-size: 24rpx;" @click="goAgreement(2)">《用户协议》</text>
					<text style="font-size: 24rpx;" @click="goAgreement(1)">《隐私协议》</text>
					<view class="r2" @click="goAccountissue()">账号申诉</view>
				</view>
			</view>

		</view>

		<view class="but">
			<u-button type="primary" text="注册登录" color='#7677EB' @click="send()"></u-button>
		</view>

		<u-notify ref="uNotify" message="Hi uView"></u-notify>

		<u-popup :show="show" @close="onClose" mode='center' bgColor='transparent' closeOnClickOverlay>
			<view class="agreement">
				<u-parse :content="vuex_theme.agreement"></u-parse>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import validCode from '@/components/validCode.vue'
	export default {
		components: {
			validCode
		},
		data() {
			return {
				show: false,
				tips: '',
				seconds: 60,
				description: '短信验证码已发送至您的手机号码 15810380593，有效期至 60S',
				c4_show: false,
				checkbox: [],
				row: {
					mobile: '',
					code: '',
					xieyi: 0
				}
			};
		},
		onLoad() {
			if ('' != this.vuex_token) { // 已经登录就不再进入这个页面
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			setCode(res) {
				this.row.code = res
			},
			onClose() {
				this.show = false;
			},
			getCode() {
				let that = this
				if (!this.row.mobile) {
					uni.$u.toast('请输入手机号');
					return false;
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$API.sendCode({
						mobile: this.row.mobile
					}).then(res => {
						uni.hideLoading();
						this.description = '短信验证码已发送至您的手机号码 ' + this.row.mobile + '，有效期至 60S';
						this.c4_show = true;
						this.$refs.uCode.start();
						// setTimeout(function () {
						//     that.c4_show = false;
						// }, 3000);
					}).catch(err => {
						uni.hideLoading();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			checkboxChange(n) {
				if (n[0] == '1') {
					this.row.xieyi = 1
				} else {
					this.row.xieyi = 0
				}
			},
			send() {
				let that = this
				if (!this.row.xieyi) {
					uni.$u.toast('请查看并同意隐私协议');
					return false;
				}

				if (!this.row.mobile) {
					uni.$u.toast('请输入手机号');
					return false;
				}

				if (!this.row.code) {
					uni.$u.toast('请输入验证码');
					return false;
				}

				uni.showLoading({
					title: '正在登录'
				})

				this.$API.sendLogin(this.row).then(res => {
					let userInfo = res.data.userinfo
					console.log('userInfo', userInfo);
					that.$u.vuex('vuex_user', userInfo);
					that.$u.vuex('vuex_token', userInfo.token);
					let set_url = uni.getStorageSync('set_url');
					uni.hideLoading();
					uni.$u.toast('登录成功');
					if (uni.getStorageSync('shareInfo')) {

						setTimeout(() => {
							const {
								realname,
								account
							} = uni.getStorageSync('shareInfo')
							uni.reLaunch({
								url: `/pages/second/partner?realname=${realname}&account=${account}`,
								success: () => {
									uni.removeStorageSync('shareInfo')
								}
							})
						}, 500)
						return
					}
					setTimeout(() => {
						uni.removeStorageSync('set_url');
						uni.navigateTo({
							url: set_url ? set_url : '/pages/index/index'
						})
					}, 1000)
					/* uni.showModal({
					    title: '提示',
					    content: '登录成功',
					    success: function () {
					        uni.removeStorageSync('set_url');
					        uni.navigateTo({
					            url: set_url ? set_url : '/pages/index/index'
					        })
					    }
					}) */

				}).catch(err => {
					uni.hideLoading();
				})
			},
			goAccountissue() {
				uni.navigateTo({
					url: '/pages/index/accountissue'
				})
			},
			goAgreement(t) {
				uni.navigateTo({
					url: '/pages/index/web?type=agreement&t=' + t
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .boxTxt uni-text {
		line-height: normal !important;
	}

	.content {
		@include flex(column);
		align-items: center;
		justify-content: center;
		width: 670rpx;
		margin: 20rpx auto;

		.logo {
			width: 598rpx;
			height: 80rpx;
			margin: 32rpx auto 0 auto;
			@include flex;
			justify-content: center;
			align-items: center;

			.s1 {
				@include flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					height: 80rpx;
					font-size: 40rpx;
					font-weight: 600;
					color: #3D3D3D;
					line-height: 80rpx;
					margin-left: 24rpx;
				}
			}
		}

		.login {
			width: 566rpx;
			background-color: #fff;
			border-radius: 48rpx;
			padding: 52rpx;
			margin-top: 60rpx;

			.title {
				height: 52rpx;
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #110202;
				line-height: 52rpx;
				text-align: center;
			}

			.c1 {
				height: 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #7D8592;
				line-height: 28rpx;
				margin-top: 56rpx;
			}

			.c2 {
				width: 566rpx;
				height: 100rpx;
				margin-top: 40rpx;

				/deep/ .u-input {
					height: 98rpx;
					border-radius: 28rpx;
				}

				.tips {
					font-size: 28rpx;
					color: #7677EB;
				}
			}

			.c3 {
				margin-top: 40rpx;
			}

			.c4 {
				width: 486rpx;
				margin-top: 56rpx;
				padding: 32rpx 40rpx;
				background-color: #F4F9FD;
				justify-content: space-between;
				border-radius: 28rpx;

				.kkk {
					@include flex;

					image {
						flex-shrink: 0;
						width: 39rpx;
						height: 40rpx;
					}

					text {
						flex-shrink: 1;
						margin-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #7677EB;
						line-height: 44rpx;
					}
				}


			}

			.c5 {
				@include flex;
				margin-top: 56rpx;
				justify-content: space-between;
				align-items: center;

				.r1 {
					@include flex;
					align-items: center;

					text {
						font-size: 28rpx;
						color: rgba(17, 2, 2, 1);
					}
				}

				.r2 {
					font-size: 26rpx;
				}
			}
		}

		.but {
			width: 590rpx;
			height: 88rpx;
			margin: 60rpx auto;
			border-radius: 28rpx;
			box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.26);

			/deep/ .u-button {
				height: 88rpx;
				border-radius: 28rpx;
			}
		}
	}

	.agreement {
		width: 590rpx;
		height: 70%;
		padding: 52rpx 40rpx;
		overflow-x: auto;
		background-color: #fff;
		border-radius: 48rpx;
	}
</style>